﻿@using Etch.OrchardCore.Search.Settings

@model Etch.OrchardCore.Search.ViewModels.SiteSearchEditViewModel

<script asp-src="https://vuejs.org/js/vue.min.js" debug-src="https://vuejs.org/js/vue.js" asp-name="vuejs"
        at="Foot"></script>
<script asp-src="https://cdn.jsdelivr.net/sortable/1.4.2/Sortable.min.js"
        debug-src="https://cdn.jsdelivr.net/sortable/1.4.2/Sortable.js" asp-name="sortable" at="Foot"></script>
<script asp-src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.14.1/vuedraggable.min.js"
        debug-src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.14.1/vuedraggable.js" asp-name="vuedraggable"
        depends-on="vuejs, sortable" at="Foot"></script>

<script asp-src="~/Etch.OrchardCore.Search/Scripts/admin.js" asp-name="searchAdmin" depends-on="jquery" at="Foot"></script>
<script at="Foot">
    initializeContentTypesEditor(document.getElementById('@Html.IdFor(m => m)_ContentTypesEditor'));
</script>

<style>
    .is-list .list-only {
        display: block;
    }

    .is-grouped .list-only {
        display: none;
    }

    .is-grouped .grouped-only {
        display: block;
    }

    .is-list .grouped-only {
        display: none;
    }
</style>

<script at="Foot">

    var onDisplayTypeChange = function (value) {
        var $html = document.getElementsByTagName('html')[0];
        $html.classList.remove('is-grouped', 'is-list');
        $html.classList.add('is-' + value.toLowerCase());
    }

    document.getElementById('@Html.IdFor(m => m.DisplayType)').addEventListener('change', function (e) {
        onDisplayTypeChange(e.target.value);
    });

    onDisplayTypeChange(document.getElementById('@Html.IdFor(m => m.DisplayType)').value)

</script>


<h5>Search Settings</h5>

<fieldset class="form-group" asp-validation-class-for="DisplayType">
    <label asp-for="DisplayType">@T["Display Type"]</label>
    <select asp-for="DisplayType" class="form-control content-preview-text content-caption-text">
        <option value="@SiteSearchDisplayType.Grouped">@T["Grouped - Results are grouped by content type"]</option>
        <option value="@SiteSearchDisplayType.List">@T["List - Results are displayed together in a list"]</option>
    </select>
    <span asp-validation-for="DisplayType"></span>
    <span class="hint">@T["Define how search results are displayed."]</span>
</fieldset>

<fieldset class="form-group list-only" asp-validation-class-for="Query">
    <label asp-for="Query">@T["Query"]</label>

    @if (Model.Queries.Any())
    {
        <select asp-for="Query" class="form-control content-preview-text content-caption-text">
            <option value="">- Please select query -</option>
            @foreach (var query in Model.Queries)
            {
                <option value="@query.Name" selected="@(query.Name == Model.Query ? "selected" : "")">@query.Name</option>
            }
        </select>
        <span asp-validation-for="Query"></span>
        <span class="hint">@T["Choose which query should be used for search."]</span>
    }
    else
    {
        <p class="alert alert-warning"><a asp-action="Index" asp-controller="Admin" asp-route-area="OrchardCore.Queries">@T["Please create a query that can be used for search."]</a></p>
    }
</fieldset>

<fieldset class="form-group" asp-validation-class-for="PageSize">
    <label asp-for="PageSize">@T["Page Size"]</label>
    <input asp-for="PageSize" class="form-control content-preview-text content-caption-text" />
    <span asp-validation-for="PageSize"></span>
    <span class="hint">@T["Number of items to display within search results."]</span>
</fieldset>

<fieldset class="form-group" asp-validation-class-for="ItemsDisplayType">
    <label asp-for="ItemsDisplayType">@T["Items Display Type"]</label>
    <input asp-for="ItemsDisplayType" class="form-control content-preview-text content-caption-text" />
    <span asp-validation-for="ItemsDisplayType"></span>
    <span class="hint">@T["Display type to use when rendering items within search results."]</span>
</fieldset>

<fieldset class="form-group grouped-only">
    <label>@T["Content Types"]</label>
    <span class="hint">— @T["The content types that should be included in the search results."]</span>

    <div id="@Html.IdFor(m => m)_ContentTypesEditor" data-for="@Html.IdFor(m => m.ContentTypeSettings)" asp-validation-class-for="ContentTypeSettings">
        <input type="hidden" asp-for="ContentTypeSettings" :value="value" data-init="@Model.ContentTypeSettings">

        <draggable tag="div" class="list-group" v-model="items" handle=".handle">
            <div v-for="(item, index) in items" v-bind:key="item.contentType" class="list-group-item list-group-item-action">
                <div class="w-100 justify-content-between">
                    <h5 class="mb-2">{{ item.contentType }}</h5>

                    <fieldset class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" :id="'includedInSearch_' + item.contentType" class="custom-control-input" v-model="item.included" />
                            <label class="custom-control-label" :for="'includedInSearch_' + item.contentType">@T["Include in search results"]</label>
                        </div>
                    </fieldset>

                    <div v-if="item.included">
                        <fieldset class="form-group" asp-validation-class-for="Query">
                            <label for="'query' + item.contentType">@T["Query"]</label>

                            @if (Model.Queries.Any())
                            {
                                <select id="'query' + item.contentType" class="form-control content-preview-text content-caption-text" v-model="item.query">
                                    <option value="">@T["- Please select query -"]</option>
                                    @foreach (var query in Model.Queries)
                                    {
                                        <option>@query.Name</option>
                                    }
                                </select>
                                <span class="hint">@T["Choose which query should be used for search."]</span>
                            }
                            else
                            {
                                <p class="alert alert-warning"><a asp-action="Index" asp-controller="Admin" asp-route-area="OrchardCore.Queries">@T["Please create a query that can be used for search."]</a></p>
                            }
                        </fieldset>

                        <fieldset class="form-group">
                            <label for="'heading_' + item.contentType">@T["Heading"]</label>
                            <input :id="'heading_' + item.contentType" class="form-control content-preview-text content-caption-text" v-model="item.heading" />
                            <span class="hint">@T["Heading to be displayed with search results. If left blank, content type display name will be used."]</span>
                        </fieldset>

                        <fieldset class="form-group">
                            <label for="'emptyResultsContent_' + item.contentType">@T["Empty Results Content"]</label>
                            <input :id="'emptyResultsContent_' + item.contentType" class="form-control content-preview-text content-caption-text" v-model="item.emptyResultsContent" />
                            <span class="hint">@T["Content displayed when no results are found for this content type."]</span>
                        </fieldset>

                        <fieldset class="form-group">
                            <label for="'viewMoreLinkUrl' + item.contentType">@T["View More Link URL"]</label>
                            <input id="'viewMoreLinkUrl' + item.contentType" class="form-control content-preview-text content-caption-text" v-model="item.viewMoreLinkUrl" />
                            <span class="hint">@T["Link to view more of this content type. Link will have search term appended via query string. If left blank, no link will be displayed."]</span>
                        </fieldset>

                        <fieldset class="form-group">
                            <label for="'viewMoreLinkText' + item.contentType">@T["View More Link Label"]</label>
                            <input id="'viewMoreLinkText' + item.contentType" class="form-control content-preview-text content-caption-text" v-model="item.viewMoreLinkText" />
                            <span class="hint">@T["Label for link to view more for content type."]</span>
                        </fieldset>
                    </div>
                </div>
            </div>
        </draggable>
    </div>
</fieldset>

<fieldset class="form-group" asp-validation-class-for="FilterInputPlaceholder">
    <label asp-for="FilterInputPlaceholder">@T["Term Input Placeholder"]</label>
    <input asp-for="FilterInputPlaceholder" class="form-control content-preview-text content-caption-text" />
    <span asp-validation-for="FilterInputPlaceholder"></span>
    <span class="hint">@T["Placeholder for input field for entering search term."]</span>
</fieldset>

<fieldset class="form-group" asp-validation-class-for="SubmitButtonLabel">
    <label asp-for="SubmitButtonLabel">@T["Submit Button Label"]</label>
    <input asp-for="SubmitButtonLabel" class="form-control content-preview-text content-caption-text" />
    <span asp-validation-for="SubmitButtonLabel"></span>
    <span class="hint">@T["Label for button that triggers search."]</span>
</fieldset>

<fieldset class="form-group" asp-validation-class-for="EmptyResultsContent">
    <label asp-for="EmptyResultsContent">@T["Empty Results Content"]</label>
    <input asp-for="EmptyResultsContent" class="form-control content-preview-text content-caption-text" />
    <span asp-validation-for="EmptyResultsContent"></span>
    <span class="hint">@T["Content displayed when no results are found."]</span>
</fieldset>